<#if model??>
${"<!-- "+ model.tableDesc +"管理  @author " + model.authorNm + " -->"}
<template>
    <!--弹出框-->
    <el-dialog
            :title="!form.<#list model.columns as column><#if column.key=="PRI">${column.columnName}</#if></#list> ? '新增' : '修改'"
            :close-on-click-modal="false"
            :visible.sync="visible"
            append-to-body
    >
        <!--form表单-->
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="editLoading">
            <el-row>
                <#list model.columns as column>
                    <#if column.key=="PRI">
                    <#else>
                        <el-form-item label="${column.columnDesc}" prop="${column.columnName}">
                        <#if column.columnType=="datetime">
                            <el-date-picker size="small" style="width: 235px;" v-model="form.${column.columnName}" type="date" value-format="yyyy-MM-dd" placeholder="选择${column.columnDesc}"></el-date-picker>
                        <#elseif column.columnType=="date">
                            <el-date-picker size="small" style="width: 235px;" v-model="form.${column.columnName}" type="date" value-format="yyyy-MM-dd" placeholder="选择${column.columnDesc}"></el-date-picker>
                        <#else>
                            <el-input size="small" placeholder="输入${column.columnDesc}" v-model="form.${column.columnName}"></el-input>
                        </#if>
                        </el-form-item>
                    </#if>
                </#list>
                <el-form-item>
                    <el-row>
                        <el-button v-db-click type="primary" size="small" @click="onSubmit">保存</el-button>
                        <el-button size="small" @click="onCancel">取消</el-button>
                    </el-row>
                </el-form-item>
            </el-row>
        </el-form>
    </el-dialog>
</template>
<script>
export default {
    data () {
        return {
            operation: 'insert', // 操作类型insert与update
            visible: false, // 当前页面是否显示
            editLoading: false, // 编辑区域loading
            // 表单数据
            form: {},
            // 校验规则
            rules: {
        <#list model.columns as column>
            <#if column.key=="PRI">
            <#else>
            ${column.columnName}: [
                { required: true, message: '请输入${column.columnDesc}', trigger: 'blur' }
            ],
            </#if>
        </#list>

    }
    }
    },
    methods: {
        // 执行init方法，给父页面调用
        init (<#list model.columns as column><#if column.key=="PRI">${column.columnName}</#if></#list>) {
            this.form = {}
            if (<#list model.columns as column><#if column.key=="PRI">${column.columnName}</#if></#list> && <#list model.columns as column><#if column.key=="PRI">${column.columnName}</#if></#list> > 0) {
                // 编辑
                this.operation = 'update'
            } else {
                // 新增
                this.operation = 'insert'
            }
            // 显示当前弹出页面
            this.visible = true
            this.${"$"}nextTick(() => {
                // 重置页面
                this.${"$"}refs.form.resetFields()
            if (Object.is(this.operation, 'update')) {
                // 更新
                this.getInfo(<#list model.columns as column><#if column.key=="PRI">${column.columnName}</#if></#list>)
            } else {
                // 新增
            }
        })
        },
        // 获取详情
        getInfo (<#list model.columns as column><#if column.key=="PRI">${column.columnName}</#if></#list>) {
            this.editLoading = true
            // 开始请求接口
            this.${"$"}axios({
                method: 'get',
                url: '/${model.model}/${model.className?uncap_first}/info',
                params: {
            <#list model.columns as column><#if column.key=="PRI">${column.columnName}</#if></#list>: <#list model.columns as column><#if column.key=="PRI">${column.columnName}</#if></#list>
        }
        })
        .then(res => {
                this.editLoading = false
            this.form = res.data
        })
        .catch(err => {
                this.editLoading = false
            this.${"$"}log('错误信息', err)
        })
        },
        // 点击提交
        onSubmit () {
            this.${"$"}log('进行提交')
            this.${"$"}refs.form.validate((valid) => {
                if (valid) {
                    if (Object.is(this.operation, 'insert')) {
                        this.doInsert()
                    } else {
                        this.doUpdate()
                    }
                } else {
                    console.log('error submit!!')
                return false
            }
        })
        },
        // 点击取消
        onCancel () {
            // 触发父页面事件
            this.${"$"}emit('getData')
            // 隐藏当前页
            this.visible = false
        },
        // 执行更新
        doUpdate () {
            this.editLoading = true
            // 开始请求接口
            this.${"$"}axios({
                method: 'post',
                url: '/${model.model}/${model.className?uncap_first}/update',
                params: this.form
            })
                    .then(res => {
                this.editLoading = false
            this.${"$"}log('更新成功', res)
            this.${"$"}message({
                message: '操作成功',
                type: 'success'
            })
        })
        .catch(err => {
                this.editLoading = false
            this.${"$"}log('错误信息', err)
        })
        },
        // 执行新增
        doInsert () {
            this.editLoading = true
            // 开始请求接口
            this.${"$"}axios({
                method: 'post',
                url: '/${model.model}/${model.className?uncap_first}/insert',
                params: this.form
            })
                    .then(res => {
                this.editLoading = false
            this.${"$"}log('更新成功', res)
            this.${"$"}message({
                message: '操作成功',
                type: 'success'
            })
            // 关闭当前页
            this.onCancel()
        })
        .catch(err => {
                this.editLoading = false
            this.${"$"}log('错误信息', err)
        })
        }
    }
}
</script>

<style>
    .el-dialog{
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0 !important;
        transform: translate(-50%, -50%);
        max-height: calc(100% - 30px);
        max-width: calc(100% - 30px);
        display: flex;
        flex-direction: column;
    }
    .el-dialog__body{
        overflow: auto;
    }
</style>
</#if>
